import Taro, {Component} from "@tarojs/taro";
import {View, Button, Image, Text, Input, Form} from "@tarojs/components";

import './authOne.less'

import icon_86 from "../../assets/img/common/icon_86.png";
import {getRuntime} from "../../utils/common";



class AuthOne extends Component {
  constructor() {
    super()
  }

  state = {
    fileList: []
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '实名认证'})
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  uploadFile() {}

  submit() {}

  render() {
    let { fileList } = this.state
    return (
      <View className='auth auth-one'>
        <View className='step-wrap'>
          <View className='line'>
            <Image className='step_on' src={require('../../assets/img/step_on.png')} />
            <Image className='step' src={require('../../assets/img/step.png')} />
            <Image className='step_point' src={require('../../assets/img/step_point.png')} />
          </View>
          <View className='tips'>
            <View className='tip color-theme'>上传相关证件</View>
            <View className='tip'>核对身份信息</View>
            <View className='tip'>核对储蓄卡</View>
          </View>
        </View>

        <View className='form-wrap content-30'>
        <Form onSubmit={this.submit.bind(this)}>
          <View className='form-wrap__group form-wrap__tb bbnone'>
            <View className='form-wrap__content form-wrap__file'>
              <View className='file-wrap' onClick={this.uploadFile.bind(this,0)}>
                <Image src={require('../../assets/img/icon_04.png')} className='upload-icon' />
                <View className='title placeholder-class'>请上传身份证正面照
                  <View>(正面号码须清晰)</View>
                </View>
                {
                  fileList[0]&&<Image src={fileList[0]} className='upload-img' />
                }
              </View>
              <View className='file-wrap' onClick={this.uploadFile.bind(this,0)}>
                <Image src={require('../../assets/img/icon_04.png')} className='upload-icon' />
                <View className='title placeholder-class'>请上传身份证反面照
                  <View>(反面号码须清晰)</View>
                </View>
                {
                  fileList[0]&&<Image src={fileList[0]} className='upload-img' />
                }
              </View>
              <View className='file-wrap' onClick={this.uploadFile.bind(this,0)}>
                <Image src={require('../../assets/img/icon_04.png')} className='upload-icon' />
                <View className='title placeholder-class'>请上传手持身份证照
                  <View>(正面号码须清晰)</View>
                </View>
                {
                  fileList[0]&&<Image src={fileList[0]} className='upload-img' />
                }
              </View>
              <View className='file-wrap' onClick={this.uploadFile.bind(this,0)}>
                <Image src={require('../../assets/img/icon_04.png')} className='upload-icon' />
                <View className='title placeholder-class'>请上传储蓄卡正面照
                  <View>(正面号码需清晰)</View>
                </View>
                {
                  fileList[0]&&<Image src={fileList[0]} className='upload-img' />
                }
              </View>
            </View>
          </View>
        </Form>
        </View>

        <Button className='circular-submit' >下一步</Button>
      </View>
    )
  }
}

export default AuthOne
